;(function() {
  'use strict';

  function copy(obj) {
    return Object.assign({}, obj);
  };

  var Event = new Vue();
  var music = document.getElementById("music");

  Vue.component('taskform', {
    template: '#taskform',
    props: ['show' ,'current'],
    methods: {
      action: function(name) {
        Event.$emit(name);
      }
    }
  })

  Vue.component('task', {
    template: '#task',
    props: ['todo', 'index'],
    methods: {
      action: function(name, param) {
        Event.$emit(name, param);
      }
    }
  });

  new Vue({
    el: '#main',
    data: {
      list: [],
      current: {},
      show: false,
    },
    mounted: function() {
      var me = this;
      if (ms.get("list"))
        this.list = ms.get("list");
      setInterval(function() {
        me.checkTime();
      }, 1000);
      Event.$on('toggleComplete', function(id) {
        me.toggleComplete(id);
      });
      Event.$on('setCurrent', function(todo) {
        me.setCurrent(todo);
      });
      Event.$on('remove', function(index) {
        me.remove(index);
      });
      Event.$on('merge', function() {
        me.merge();
      });
      Event.$on('showDetail', function() {
        me.showDetail();
      });
    },
    methods: {
      showDetail: function() {
        this.show = !this.show;
      },
      checkTime: function() {
        var me = this;
        this.list.forEach(function(item, index) {
          if (!item.alertTime || me.list[index].alertConfirmed)
            return;
          var alertTime = (new Date(item.alertTime)).getTime();
          var now = (new Date()).getTime();
          if (now >= alertTime) {
            music.currentTime = 0;
            music.play();
            Vue.set(me.list[index], 'alertConfirmed', true);
            setTimeout(function() {
              alert(me.list[index].title);
            },100);
            // var confirmed = confirm(me.list[index].title);
            // if (confirmed)
            //   Vue.set(me.list[index], 'alertConfirmed', confirmed);
          }
        });
      },
      merge: function() {
        var isUpdate = this.current.id;
        if (isUpdate) {
          var index = this.list.findIndex(function(item) {
            return item.id == isUpdate;
          });
          Vue.set(this.list, index, copy(this.current));
        }
        else {
          if (!$.trim(this.current.title) && this.current.title !== 0)
            return;
          var todo = copy(this.current);
          todo.id = this.nextId();
          this.list.push(todo);
        }
        this.clearCurrent();
        this.show = false;
        // console.log(this.list);
      },
      remove: function(index) {
        this.list.splice(index, 1);
      },
      nextId: function() {
        if (this.list.length == 0)
          return this.list.length + 1;
        var lastIndex = this.list.length - 1;
        var lastItem = this.list[lastIndex];
        return lastItem.id + 1;
      },
      clearCurrent: function() {
        this.setCurrent({});
      },
      setCurrent: function(todo) {
        this.current = copy(todo);
      },
      toggleComplete: function(id) {
        var index = this.list.findIndex(function(item) {
          return item.id == id;
        });
        Vue.set(this.list[index], "completed", !this.list[index].completed);
        Vue.set(this.list[index], 'alertConfirmed', true);
        this.clearCurrent({});
      },
    },
    watch: {
      list: {
        deep: true,
        handler: function(n, o) {
          ms.set("list", n);
        }
      }
    },
  });
  //在作用域中的一个方法中想要执行作用域中的另一个方法 必须通过该作用域的父级实例调用
  // var a = {
  //   d: {
  //     b: function() {
  //       console.log(this.c());
  //     },
  //     c: function() {
  //       return 1 + 2;
  //     }
  //   },
  // };
  // a.d.b();

  //方法或函数变量必须在对象变量声明后调用 函数可以在函数声明前调用(函数优先挂载)

  // var a = function() {
  //   b();
  //   function b() {
  //     console.log(c());
  //   };
  //   function c() {
  //     return 1 + 1;
  //   };
  // }
  // a();
})();
